<template>
    <div id="view-user">
        <Title title="查询机构"/>
        <div id="form">
            <el-form :model="group" style="width: 80%; text-align: center" ref="ruleForm"
                     label-width="80px" class="form">
                <el-form-item  label="机构名" style="width: 300px; height: 30px">
                    <el-input v-model="group.groupName"  placeholder="请输入内容"/>
                </el-form-item>
                <el-form-item label="所属类型" style="width: 300px; height: 30px">
                    <el-select v-model="group.groupTypeId" placeholder="请选择">
                        <el-option label="学校" value="2"/>
                        <el-option label="教育局" value="3"/>
                        <el-option label="教育厅" value="4"/>
                    </el-select>
                </el-form-item>
                <!--            所属区域-->
                <el-form-item
                        label="所属区域">
                    <el-cascader :props="props" @change="handleCascader" :key="isKey" ></el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-button key="2" size="small" type="primary" @click.prevent="selectGroup('ruleForm')" >
                        搜索
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <Title title="查询结果"/> （添加用户请在查看用户里添加）
        <el-table border
                  :data="tableData
                .filter(item=>{
                            if (item.groupTypeId===2){
                                item.groupType = '学校';
                                }else if (item.groupTypeId===3){
                                item.groupType = '教育局';
                                }else if (item.groupTypeId===4){
                                item.groupType = '教育厅';
                                }
                                return item;
                                })"
                  style="width: 100%">
            <el-table-column label="机构名" prop="groupName"/>
            <el-table-column label="类型" prop="groupType"/>
            <el-table-column label="地址" prop="address"/>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleView(scope.$index, scope.row)">查看用户</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--        分页-->
        <Pagination path="/api/Studies_to_travel/group/queryGroupInfoByGroupNamePaging"
                    :item="group"
                    :count="count"
                    @transfer="transfer"
        />

    </div>
</template>

<script>
    import Title from "@/components/title/Title";
    import { Cascader,Table, TableColumn, Button, Input, Select, Form, FormItem, Option} from "element-ui";
    import Pagination from "@/components/pagination/Pagination";
    import {post} from "@/request/AxiosMAX";

    export default {
        name: "ViewGroup",
        components: {
            "el-table": Table,
            "el-table-column": TableColumn,
            "el-button": Button,
            "el-input": Input,
            "el-select": Select,
            "el-form": Form,
            "el-form-item": FormItem,
            "el-option": Option,
            Pagination,
            Title,
            "el-cascader":Cascader
        },
        data() {
            return {
                //清空级联选择框用的
                isKey:0,
                isKey1:0,
                //级联数据
                props: {
                    lazy: true,
                    lazyLoad (node, resolve) {
                        const { level } = node;
                        if (level===0){
                            post("/api/Studies_to_travel/address/queryByParent").then(
                                res=>{
                                    if (res.code===0){
                                        let nodes = [];
                                        res.data.forEach(item=>{
                                            let node = {};
                                            node.id = item.id;
                                            node.value = item.address;
                                            node.label = item.address;
                                            nodes.push(node);
                                        });
                                        resolve(nodes);
                                    }
                                }
                            );
                        }else if (level===1){
                            let data = {
                                parentId:node.data.id
                            };
                            console.info(data);
                            post("/api/Studies_to_travel/address/queryByParentId",data).then(
                                res=>{
                                    if (res.code===0){
                                        let nodes = [];
                                        res.data.forEach(item=>{
                                            let node = {};
                                            node.id = item.id;
                                            node.value = item.address;
                                            node.label = item.address;
                                            nodes.push(node);
                                        });
                                        resolve(nodes);
                                    }
                                }
                            );
                        }else {
                            let data = {
                                parentId:node.data.id
                            };
                            post("/api/Studies_to_travel/address/queryByParentId",data).then(
                                res=>{
                                    if (res.code===0){
                                        let nodes = [];
                                        res.data.forEach(item=>{
                                            let node = {};
                                            node.id = item.id;
                                            node.value = item.address;
                                            node.label = item.address;
                                            node.leaf = "leaf";
                                            nodes.push(node);
                                        });
                                        resolve(nodes);
                                    }
                                }
                            );
                        }
                    }
                },
                //表单数据
                tableData: [],
                //机构对象
                group:{
                    groupTypeId:'',
                    groupName:'',
                    address:'',
                    state:0,
                    startNumber:1,
                    pageSize:6
                },
                //分页需要用的数据
                count:0,
            }
        },
        methods: {

            //查询
            selectGroup(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid){
                        post("/api/Studies_to_travel/group/queryGroupInfoByGroupNamePaging",this.group)
                            .then(res=>{
                                if (res.code===0){
                                    //清楚表单数据
                                    this.tableData = res.data;
                                    this.count = res.count;
                                    this.$message({
                                        message: '查询成功~',
                                        type: 'success'
                                    });
                                }else {
                                    this.$message({
                                        message: '查询失败失败~',
                                        type: 'error'
                                    });
                                }
                            })
                            .catch(err=>{
                                console.info(err);
                                this.$message({
                                    message: '网络错误~',
                                    type: 'error'
                                });
                            });
                    }
                })
            },
            //获得子组件传过来的参数
            transfer(item){
                this.tableData = item.data;
            },
            //获得级联选择器中的值
            handleCascader(item){
                this.group.address = item[0]+item[1]+item[2];
            },
            handleView(index, row) {
                //路由跳转
                this.$router.push({path:"/admin/addUser",query:{
                        group:row
                    }})
            }
        },
        created() {
            //获得机构
            post("/api/Studies_to_travel/group/queryGroupInfoByGroupNamePaging",this.group)
                .then(res=>{
                    if (res.code===0){
                        this.tableData = res.data;
                        this.count = res.count;
                    }
                })
                .catch(err=>{
                    console.info(err);
                })
        }
    }
</script>

<style lang="less">
    #form {
        .form {
            display: flex;
        }
    }
</style>
